<template>
  <view class="index-top">
    <!-- #ifdef  H5 -->
    <wd-sticky :offset-top="-44">
      <view class="index-top">
        <view class="index-tab">
          <view
            @click="tabIndex = item.index"
            v-for="(item, index) in tabs"
            :key="index"
            :class="{ active: tabIndex == item.index }"
            class="tab-li"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </wd-sticky>
    <!-- #endif -->
    <!-- #ifndef  H5 -->
    <wd-sticky :offset-top="0">
      <view class="index-top" style="height: 92px">
        <view style="height: 44px"></view>
        <view class="index-tab">
          <view
            @click="tabIndex = item.index"
            v-for="(item, index) in tabs"
            :key="index"
            :class="{ active: tabIndex == item.index }"
            class="tab-li"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </wd-sticky>
    <!-- <view style="height: 10px"></view> -->
    <!-- #endif -->
    <view class="index-grid" v-if="tabIndex == 1">
      <wd-grid>
        <view  @click="toRouter('/pages/custom-skin/index', 'name=微信QQ皮肤&category=qq-skin')">
          <wd-grid-item icon-size="50px" use-icon-slot text="微信QQ皮肤">)" icon-size="50px" use-icon-slot text="微信QQ皮肤">
          <template #icon>
            <view class="icon-part">
              <image
                style="width: 30px"
                mode="widthFix"
                src="/static/assets/images/tab1.png"
              />
            </view>
          </template>
        </wd-grid-item>
        </view>
        <view  @click="toRouter('/pages/custom-skin/index', 'name=键盘皮肤&category=keyboard-skin')">
          <wd-grid-item icon-size="50px" use-icon-slot text="键盘皮肤">
            <template #icon>
              <view class="icon-part">
                <image
                  style="width: 30px"
                  mode="widthFix"
                  src="/static/assets/images/tab2.png"
                />
              </view>
            </template>
          </wd-grid-item>
        </view>
        <view @click="toRouter('/pages/custom-skin/index', 'name=情侣壁纸&category=couple-wallpaper')">
          <wd-grid-item icon-size="50px" use-icon-slot text="情侣壁纸">
          <template #icon>
            <view class="icon-part">
              <image
                style="width: 30px"
                mode="widthFix"
                src="/static/assets/images/tab3.png"
              />
            </view>
          </template>
        </wd-grid-item>
        </view>
        <view @click="toRouter('/pages/custom-skin/index', 'name=文字锁&category=text-lock')">
          <wd-grid-item icon-size="50px" use-icon-slot text="文字锁">
          <template #icon>
            <view class="icon-part">
              <image
                style="width: 30px"
                mode="widthFix"
                src="/static/assets/images/tab4.png"
              />
            </view>
          </template>
        </wd-grid-item>
        </view>
        
      </wd-grid>
      <view class="water-fall">
        <scroll-view class="scroll-view" scroll-y>
          <Waterfalls ref="fallsRef" :pictures="pictures" @imageClick="wapperClick" :column="3" :value="falls"></Waterfalls>
        </scroll-view>
      </view>
    </view>
    <Produce v-if="tabIndex == 2"></Produce>
  </view>
  <view style="height: 60px"></view>

  <NavBar :index="1"></NavBar>
</template>

<script setup>
import NavBar from "@/section/a-navbar.vue";
import { toRouter } from "@/hooks/utils";
import { ref } from "vue";
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";
import Produce from './produce.vue'
const fallsRef = ref(null);
const loadingState = ref(true);
const pictures = ref([
  { src: "/static/assets/images/t1.png" },
  { src: "/static/assets/images/t2.png" },
  { src: "http://124.223.41.167:8080/mobile/static/images/t3.png" },
  { src: "/static/assets/images/t4.png" },
  { src: "/static/assets/images/t5.png" },
  { src: "/static/assets/images/t6.png" },
]);

const page = ref(1), isPullDownRefresh = ref(false);
const falls = ref([]);
const tabIndex = ref(1);
const tabs = ref([
  {
    name: "推荐",
    index: 1,
  },
  {
    name: "排行榜",
    index: 2,
  },
]);

onShow(() => {
  initList();
});

onPullDownRefresh(() => {
  console.log("onPullDownRefresh");
  page.value = 1;
  uni.showToast({
    title: '刷新中',
    icon: 'none',
    duration: 1500,
    position: 'top'
  });
  isPullDownRefresh.value = true;
  uni.request({
    url: `/api/wallpaper/oss/page?recommend=1&page=${page.value}&size=20`
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });

    falls.value = res.data.data;
    fallsRef.value.refresh()
  });
})
onReachBottom(() => {
  console.log("onReachBottom");
  page.value++;
  isPullDownRefresh.value = false;
  initList();
})
onLoad(() => {
  let username = uni.getStorageSync('wpa_username')
  if( !username ) return;
  wx.login({
    success: function(loginRes) {
      if (loginRes.code) {
        uni.request({
          url: '/api/wallpaper/price/openid',
          method: 'POST',
          data: {
            code: loginRes.code
          },
          success: (res) => {
            // console.log(res.data);
            
            if (res.data.openid) {
              uni.request({
                url: '/api/wallpaper/user/update',
                method: 'POST',
                data: {
                  username: username,
                  openid: res.data.openid
                },
              })
            }
          },
        })
      }
    }
  })
})

const initList = () => {
  if (loadingState.value) {
    uni.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 6000,
    });
  }
  loadingState.value = false;
  uni.request({
    url: `/api/wallpaper/oss/page?recommend=1&page=${page.value}&size=20`
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });

    falls.value = falls.value.concat(res.data.data);
    uni.hideToast();
  });
};
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}

</script>

<style lang="scss" scoped>
page {
  height: 100vh;
  overflow-x: hidden;
  background: #F5F5F5;
}
.index-top {
  width: 100vw;
  background: rgb(245, 245, 245)
    url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat;
  background-size: 100% 500px;
}
.index-tab {
  display: flex;
  height: 3rem;
  padding: 0 1rem;
  align-items: center;
  .tab-li {
    padding: 0 0.8rem;
    position: relative;
  }
  .active {
    font-size: 1.2rem;
  }
  .active::after {
    content: "";
    width: 20px;
    height: 3px;
    background: rgb(220, 64, 100);
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -10px;
    border-radius: 10px;
  }
}
.index-grid {
  --wot-color-white: none;
  margin: 0 1rem;
}
.icon-part {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgb(252, 242, 245);
  align-items: center;
  justify-content: center;
}
.grid-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.grid-box_li {
  position: relative;
}
.gm-fix {
  position: absolute;
  top: 10px;
  right: 10px;
}
.gm-tab_li {
  color: rgba(144, 144, 144, 1);
  font-size: 0.9rem;
  margin-right: 1rem;
}
.gm-tab {
  .active {
    color: rgba(220, 70, 129, 1);
  }
}
.pictures-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin-top: 1rem;
}

</style>
